JS 2021/2022

Web Development - জাভাস্ক্রিপ্ট (JavaScript) জাভাস্ক্রিপ্ট আপডেট ভার্সন (JS Update Version) |
307
307

ECMAScript 2021 (ES12) এবং ECMAScript 2022 (ES13) জাভাস্ক্রিপ্টের দুটি গুরুত্বপূর্ণ আপডেট যা ২০২১ এবং ২০২২ সালে প্রকাশিত হয়েছিল। এই আপডেটগুলো জাভাস্ক্রিপ্টের ভাষাকে আরও শক্তিশালী, নমনীয় এবং কার্যকর করে তোলে, ডেভেলপারদের জন্য নতুন ফিচার এবং উন্নত বৈশিষ্ট্য নিয়ে আসে। নিচে ES12 এবং ES13 এর প্রধান বৈশিষ্ট্যসমূহ বিস্তারিতভাবে আলোচনা করা হলো।


ECMAScript 2021 (ES12) এর প্রধান বৈশিষ্ট্যসমূহ

Logical Assignment Operators (&&=, ||=, ??=)

Logical Assignment Operators হলো লজিক্যাল অপারেটর এবং অ্যাসাইনমেন্ট অপারেটরকে একসাথে মিশ্রিত করার একটি নতুন পদ্ধতি। এগুলো কোডের সংক্ষিপ্ততা এবং পাঠযোগ্যতা বৃদ্ধি করে।

উদাহরণ:

let a = 1;
let b = 0;
let c = null;

a &&= 2;  // a = a && 2; => a = 2
b ||= 2;  // b = b || 2; => b = 2
c ??= 2;  // c = c ?? 2; => c = 2

console.log(a, b, c);  // আউটপুট: 2 2 2

ব্যাখ্যা:

  • &&= অপারেটরটি ডানদিকের মানকে প্রয়োগ করে যদি বামদিকের মান সত্যি হয়।
  • ||= অপারেটরটি ডানদিকের মানকে প্রয়োগ করে যদি বামদিকের মান মিথ্যা হয়।
  • ??= অপারেটরটি ডানদিকের মানকে প্রয়োগ করে যদি বামদিকের মান null বা undefined হয়।

Numeric Separators

Numeric Separators হলো বড় সংখ্যাগুলিকে পড়তে সহজ করার জন্য ব্যবহৃত একটি ফিচার, যেখানে আন্ডারস্কোর (_) ব্যবহার করে সংখ্যার বিভিন্ন অংশ আলাদা করা হয়।

উদাহরণ:

const billion = 1_000_000_000;
const bytes = 1_024;
const hex = 0xFF_FF_FF;

console.log(billion);  // আউটপুট: 1000000000
console.log(bytes);    // আউটপুট: 1024
console.log(hex);      // আউটপুট: 16777215

ব্যাখ্যা: আন্ডারস্কোর ব্যবহার করে বড় সংখ্যাগুলিকে ভিজ্যুয়ালি বিভক্ত করা হয়, যা কোডের পাঠযোগ্যতা বৃদ্ধি করে।


Promise.any()

Promise.any() হলো একটি নতুন প্রমিস মেথড যা একাধিক প্রমিসের মধ্যে যেকোনো একটি সফল হলে তা রিটার্ন করে। যদি সব প্রমিস ব্যর্থ হয়, তবে এটি একটি AggregateError রিটার্ন করে।

উদাহরণ:

const promise1 = Promise.reject("Error 1");
const promise2 = Promise.resolve("Success 2");
const promise3 = Promise.resolve("Success 3");

Promise.any([promise1, promise2, promise3])
    .then(result => console.log(result))  // আউটপুট: Success 2
    .catch(error => console.error(error));

ব্যাখ্যা: Promise.any() প্রথম সফল প্রমিসের মান রিটার্ন করে এবং সব প্রমিস ব্যর্থ হলে একটি AggregateError প্রদান করে।


WeakRefs

WeakRefs হলো জাভাস্ক্রিপ্টে একটি নতুন রেফারেন্স টাইপ যা গার্বেজ কালেকশন দ্বারা অবজেক্ট রিফারেন্স করতে পারে না। এটি মেমোরি ব্যবস্থাপনায় সহায়ক।

উদাহরণ:

let obj = { name: "Alice" };
let weakRef = new WeakRef(obj);

console.log(weakRef.deref());  // আউটপুট: { name: "Alice" }

obj = null;  // অবজেক্ট রিলিজ করা হল
console.log(weakRef.deref());  // আউটপুট: undefined (গার্বেজ কালেকশন দ্বারা মুছে ফেলা হয়েছে)

ব্যাখ্যা: WeakRef ব্যবহার করে অবজেক্টের উপর একটি দুর্বল রেফারেন্স তৈরি করা হয়, যা গার্বেজ কালেকশন দ্বারা মুছে ফেলা যেতে পারে।


String.prototype.replaceAll()

replaceAll() মেথডটি একটি স্ট্রিংয়ের সব ম্যাচিং সাবস্ট্রিংকে প্রতিস্থাপন করে। এটি পূর্বের replace() এর তুলনায় আরও সহজ ও কার্যকর।

উদাহরণ:

const str = "Hello Hello World";
const newStr = str.replaceAll("Hello", "Hi");
console.log(newStr);  // আউটপুট: Hi Hi World

ব্যাখ্যা: replaceAll() মেথডটি স্ট্রিংয়ের সব "Hello" শব্দকে "Hi" তে পরিবর্তন করে।


AggregateError

AggregateError হলো একটি নতুন এ্যারর টাইপ যা একাধিক এ্যারর ধারণ করতে পারে। এটি মূলত Promise.any() এর সাথে ব্যবহার করা হয়।

উদাহরণ:

const promise1 = Promise.reject("Error 1");
const promise2 = Promise.reject("Error 2");

Promise.any([promise1, promise2])
    .then(result => console.log(result))
    .catch(error => {
        console.error(error.name);    // আউটপুট: AggregateError
        console.error(error.errors);  // আউটপুট: ["Error 1", "Error 2"]
    });

ব্যাখ্যা: যদি Promise.any() এর সব প্রমিস ব্যর্থ হয়, তবে একটি AggregateError রিটার্ন হয় যা সব ব্যর্থ এ্যারর ধারণ করে।


Top-level await

Top-level await মডিউল লেভেলে অ্যাসিঙ্ক্রোনাস অপারেশনগুলি সোজাসুজি await ব্যবহার করে পরিচালনা করার সুবিধা প্রদান করে। এটি কোডকে আরও সহজ এবং রিডেবল করে তোলে।

উদাহরণ:

// module.mjs
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);

ব্যাখ্যা: await কিওয়ার্ডটি সরাসরি মডিউলের ভিতরে ব্যবহার করা যায়, যা অ্যাসিঙ্ক্রোনাস অপারেশনগুলোকে সহজ করে তোলে।


ECMAScript 2022 (ES13) এর প্রধান বৈশিষ্ট্যসমূহ

Class Fields এবং Private Methods

Class Fields এবং Private Methods ক্লাসে প্রাইভেট এবং পাবলিক প্রপার্টি ডিফাইন করার জন্য ব্যবহৃত হয়। এটি অবজেক্ট-অরিয়েন্টেড প্রোগ্রামিংকে আরও সহজ এবং নিরাপদ করে তোলে।

উদাহরণ:

class Rectangle {
    width = 0;
    height = 0;
    #privateField = "secret";

    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    area() {
        return this.width * this.height;
    }

    getPrivate() {
        return this.#privateField;
    }
}

const rect = new Rectangle(5, 10);
console.log(rect.area());          // আউটপুট: 50
console.log(rect.getPrivate());    // আউটপুট: secret
console.log(rect.#privateField);   // SyntaxError: Private field '#privateField' must be declared in an enclosing class

ব্যাখ্যা: #privateField একটি প্রাইভেট প্রপার্টি যা শুধুমাত্র ক্লাসের ভিতরে অ্যাক্সেসযোগ্য।


Top-level await

Top-level await ES13 এ উন্নত করা হয়েছে, যা মডিউল লেভেলে অ্যাসিঙ্ক্রোনাস কোড লেখাকে আরও সহজ করে তোলে।

উদাহরণ:

// module.mjs
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);

ব্যাখ্যা: ES13 এ await কিওয়ার্ডটি মডিউলের সরাসরি লেভেলে ব্যবহার করা যায়, যা অ্যাসিঙ্ক্রোনাস অপারেশনগুলোকে আরও সহজ এবং রিডেবল করে তোলে।


Ergonomic Brand Checks for Private Fields

Ergonomic Brand Checks হলো প্রাইভেট ফিল্ডগুলির অস্তিত্ব চেক করার জন্য একটি নতুন সুবিধা, যা প্রাইভেট ফিল্ডগুলির নিরাপত্তা বাড়ায়।

উদাহরণ:

class MyClass {
    #privateField;

    constructor() {
        this.#privateField = 42;
    }

    isPrivateField(value) {
        return MyClass.#hasPrivateField(this, value);
    }

    static #hasPrivateField(obj, value) {
        return obj.#privateField === value;
    }
}

const obj = new MyClass();
console.log(obj.isPrivateField(42));  // আউটপুট: true

ব্যাখ্যা: এই ফিচারটি ক্লাসের মধ্যে প্রাইভেট ফিল্ডের অস্তিত্ব চেক করার সুবিধা প্রদান করে, যা কোডের নিরাপত্তা এবং রিডেবিলিটি উন্নত করে।


RegExp Match Indices

RegExp Match Indices হলো একটি নতুন ফিচার যা রেগুলার এক্সপ্রেশনের ম্যাচের সূচকগুলি প্রদান করে, যা স্ট্রিং ম্যানিপুলেশনে সহায়ক।

উদাহরণ:

const regex = /(foo)(bar)/d;
const str = "foobar";
const match = regex.exec(str);

if (match) {
    console.log(match.indices);
    /*
    আউটপুট:
    [
        [0, 6],     // পুরো ম্যাচের সূচক
        [0, 3],     // 'foo' এর সূচক
        [3, 6]      // 'bar' এর সূচক
    ]
    */
}

ব্যাখ্যা: match.indices প্রপার্টিটি প্রতিটি ক্যাপচার গ্রুপের সূচক প্রদান করে, যা স্ট্রিং প্রসেসিংকে আরও শক্তিশালী করে তোলে।


Error Cause

Error Cause হলো একটি নতুন ফিচার যা এ্যারর অবজেক্টে একটি কজ (cause) প্রদান করার সুবিধা দেয়, যা এ্যাররের মূল কারণ বুঝতে সহায়ক।

উদাহরণ:

try {
    throw new Error("Initial error");
} catch (err) {
    throw new Error("Secondary error", { cause: err });
}

try {
    // Outer try-catch
} catch (error) {
    console.error(error.message);          // আউটপুট: Secondary error
    console.error(error.cause);            // আউটপুট: Initial error
}

ব্যাখ্যা: cause প্রপার্টিটি ব্যবহার করে একটি এ্যাররে অন্য একটি এ্যাররের কারণ হিসাবে যোগ করা যায়, যা ডিবাগিং এবং এ্যারর ম্যানেজমেন্টকে সহজ করে।


Array.prototype.at()

Array.prototype.at() হলো একটি নতুন মেথড যা অ্যারের নির্দিষ্ট সূচকে অবস্থিত উপাদান অ্যাক্সেস করার সহজ পদ্ধতি প্রদান করে। এটি নেতিবাচক সূচকগুলিও সমর্থন করে, যা অ্যারের শেষ থেকে উপাদান অ্যাক্সেস করতে ব্যবহৃত হয়।

উদাহরণ:

const array = [10, 20, 30, 40, 50];

console.log(array.at(2));   // আউটপুট: 30
console.log(array.at(-1));  // আউটপুট: 50
console.log(array.at(-3));  // আউটপুট: 30

ব্যাখ্যা: at() মেথডটি সহজে নির্দিষ্ট বা নেতিবাচক সূচকে উপাদান অ্যাক্সেস করতে দেয়, যা array[array.length - 1] এর পরিবর্তে আরও সংক্ষিপ্ত পদ্ধতি প্রদান করে।


Object.hasOwn()

Object.hasOwn() হলো একটি নতুন মেথড যা অবজেক্টের নিজস্ব প্রপার্টি আছে কিনা তা চেক করে, যা Object.prototype.hasOwnProperty() এর তুলনায় আরও সংক্ষিপ্ত এবং নিরাপদ পদ্ধতি প্রদান করে।

উদাহরণ:

const obj = { a: 1, b: 2 };

console.log(Object.hasOwn(obj, 'a'));  // আউটপুট: true
console.log(Object.hasOwn(obj, 'c'));  // আউটপুট: false

ব্যাখ্যা: Object.hasOwn() মেথডটি সরাসরি প্রপার্টির অস্তিত্ব চেক করে এবং এটি নোটিফিকেশন এড়ানোর জন্য সিকিউর থাকে।


ECMAScript 2021 (ES12) এবং ECMAScript 2022 (ES13) এর সুবিধাসমূহ

ES12 এর সুবিধাসমূহ

  • কোডের সংক্ষিপ্ততা এবং পাঠযোগ্যতা: Logical Assignment Operators এবং Numeric Separators কোডকে আরও সংক্ষিপ্ত এবং সহজবোধ্য করে তোলে।
  • অ্যাসিঙ্ক্রোনাস প্রোগ্রামিং উন্নতি: Promise.any() এবং for-await-of লুপের মাধ্যমে অ্যাসিঙ্ক্রোনাস কোড লেখা আরও সহজ এবং কার্যকরী হয়।
  • ডেটা হ্যান্ডলিং সহজ করা: BigInt এর মাধ্যমে বড় সংখ্যাগুলোকে সঠিকভাবে হ্যান্ডেল করা সম্ভব হয়েছে।
  • রেগুলার এক্সপ্রেশন শক্তিশালী করা: লুকবিহাইন্ড অ্যাসারশনস, নেমড ক্যাপচার গ্রুপস, ডটঅল ফ্ল্যাগ, এবং ইউনিকোড প্রপার্টি এস্কেপস রেগুলার এক্সপ্রেশনকে আরও শক্তিশালী এবং নমনীয় করে তোলে।
  • মডিউল সিস্টেমে উন্নতি: ডায়নামিক ইমপোর্ট এবং মডিউল namespace exports ডেভেলপারদের জন্য মডিউল ব্যবহারে আরও নমনীয়তা প্রদান করে।
  • Error Management উন্নতি: Error Cause এর মাধ্যমে এ্যারর ম্যানেজমেন্ট আরও কার্যকরী ও তথ্যবহুল হয়েছে।

ES13 এর সুবিধাসমূহ

  • বড় সংখ্যার হ্যান্ডেলিং: BigInt এর মাধ্যমে বড় সংখ্যাগুলো সঠিকভাবে হ্যান্ডেল করা যায়, যা আর্থিক হিসাব বা অন্যান্য উচ্চ পরিসরের গণনার ক্ষেত্রে প্রয়োজনীয়।
  • ক্লাস প্রপার্টি উন্নতি: Class Fields এবং Private Methods ডেভেলপারদের অবজেক্ট-অরিয়েন্টেড প্রোগ্রামিংকে আরও সহজ এবং নিরাপদ করে তোলে।
  • অ্যাসিঙ্ক্রোনাস প্রোগ্রামিং উন্নতি: for-await-of, async/await, এবং Promise.allSettled() এর মাধ্যমে অ্যাসিঙ্ক্রোনাস কোড লেখা আরও সহজ এবং রিডেবল হয়।
  • অবজেক্ট এবং অ্যারের ম্যানিপুলেশন সহজ: Array.prototype.flat(), Array.prototype.flatMap(), Object.fromEntries(), এবং Object.hasOwn() মেথডগুলো ডেটা হ্যান্ডলিংকে আরও কার্যকরী করে তোলে।
  • স্ট্রিং ম্যানিপুলেশন উন্নতি: trimStart(), trimEnd(), এবং String.prototype.matchAll() মেথডগুলো স্ট্রিং প্রসেসিংকে আরও সহজ করে তোলে।
  • রেগুলার এক্সপ্রেশন শক্তিশালী করা: লুকবিহাইন্ড অ্যাসারশনস, নেমড ক্যাপচার গ্রুপস, ডটঅল ফ্ল্যাগ, এবং ইউনিকোড প্রপার্টি এস্কেপস রেগুলার এক্সপ্রেশনকে আরও শক্তিশালী এবং নমনীয় করে তোলে।
  • কোডের রক্ষণাবেক্ষণ সহজ করা: ট্রেইলিং কমা ব্যবহার করে প্যারামিটার লিস্ট এবং কলগুলিকে আরও সহজে মেইনটেন করা যায়।
  • গ্লোবাল অবজেক্ট অ্যাক্সেস: globalThis ব্যবহার করে গ্লোবাল অবজেক্ট অ্যাক্সেস করা সহজ এবং পরিবেশ নির্বিশেষে একসাথে কাজ করে।

সারাংশ

ECMAScript 2021 (ES12) এবং ECMAScript 2022 (ES13) জাভাস্ক্রিপ্টের ভাষাকে আরও শক্তিশালী এবং কার্যকর করে তোলে। Logical Assignment Operators, Numeric Separators, Promise.any(), BigInt, for-await-of লুপ, এবং String.prototype.replaceAll() এর মতো ফিচারগুলো ডেভেলপারদের কোড লেখাকে আরও সহজ, সংক্ষিপ্ত এবং কার্যকর করে তোলে। ES13 এ ক্লাস প্রপার্টি উন্নতি, Array.prototype.at(), Object.hasOwn(), এবং Symbol.prototype.description এর মতো নতুন বৈশিষ্ট্যগুলো জাভাস্ক্রিপ্টকে আরও নমনীয় এবং শক্তিশালী করে তোলে।

এই নতুন বৈশিষ্ট্যগুলো শেখা এবং ব্যবহার করা ডেভেলপারদের কোডের গুণগত মান এবং কার্যকারিতা বৃদ্ধি করতে সহায়ক, যা বড় এবং জটিল প্রজেক্টগুলির ক্ষেত্রে বিশেষভাবে উপকারী।


অতিরিক্ত টিপস

  • নতুন মেথড অনুশীলন করুন: BigInt, Array.prototype.flat(), Object.fromEntries(), Promise.prototype.finally(), Object.hasOwn() ইত্যাদি মেথডগুলো ব্যবহার করে বিভিন্ন উদাহরণ তৈরি করুন।
  • অ্যাসিঙ্ক্রোনাস কোড লেখা অনুশীলন করুন: for-await-of এবং async/await ব্যবহার করে অ্যাসিঙ্ক্রোনাস ফাংশনগুলো লিখে দেখুন এবং তাদের কার্যকারিতা বুঝুন।
  • ক্লাস প্রপার্টি ব্যবহার করুন: Class Fields এবং Private Methods ব্যবহার করে ক্লাস ডেভেলপমেন্ট অনুশীলন করুন।
  • রেগুলার এক্সপ্রেশন শিখুন: রেগুলার এক্সপ্রেশন এর উন্নত বৈশিষ্ট্যগুলো ব্যবহার করে বিভিন্ন স্ট্রিং ম্যানিপুলেশন টাস্ক সমাধান করার চেষ্টা করুন।
  • স্ট্রিং ম্যানিপুলেশন ব্যবহার করুন: trimStart(), trimEnd(), এবং String.prototype.matchAll() মেথডগুলো স্ট্রিং ম্যানিপুলেশনে ব্যবহার করে বিভিন্ন উদাহরণ তৈরি করুন।
  • মডিউল সিস্টেম উন্নতি করুন: ডায়নামিক ইমপোর্ট এবং মডিউল namespace exports ব্যবহার করে কোডকে আরও নমনীয় ও পুনরায় ব্যবহারযোগ্য করুন।
  • Error Management উন্নতি করুন: Error Cause এর মাধ্যমে এ্যারর ম্যানেজমেন্ট উন্নত করুন, যা ডিবাগিং এবং এ্যারর ট্র্যাকিংকে সহজ করে।
  • ব্রাউজার সমর্থন পরীক্ষা করুন: আপনার টার্গেট ব্রাউজারগুলো ES12 এবং ES13 এর নতুন ফিচারগুলো সমর্থন করে কিনা তা নিশ্চিত করুন।
  • ডকুমেন্টেশন পড়ুন: MDN Web Docs এর মতো রিসোর্স থেকে ES12 এবং ES13 এর নতুন বৈশিষ্ট্যগুলোর বিস্তারিত জানুন এবং বিভিন্ন ব্যবহারিক উদাহরণ অনুসরণ করুন।

ES12 এবং ES13 এর নতুন বৈশিষ্ট্যগুলোকে ভালোভাবে বুঝে এবং প্রয়োগ করে আপনি আপনার জাভাস্ক্রিপ্ট প্রোগ্রামিং দক্ষতাকে আরও উন্নত এবং কার্যকরী করতে পারবেন, যা আপনার কোডকে আরও নির্ভরযোগ্য এবং শক্তিশালী করে তুলবে।

Content added By
টপ রেটেড অ্যাপ

স্যাট অ্যাকাডেমী অ্যাপ

আমাদের অল-ইন-ওয়ান মোবাইল অ্যাপের মাধ্যমে সীমাহীন শেখার সুযোগ উপভোগ করুন।

ভিডিও
লাইভ ক্লাস
এক্সাম
ডাউনলোড করুন
Promotion